<template>
  <div class="build-map">
    <label class="build-cell" :title="isDisabled(index + 1)?'取消删除':'删除不存在楼栋'"
            :class="{'disabled': isDisabled(index + 1)}"
            v-for="index in total"
            @click="checkHandle(index + 1)">
      <span  class="build-cell-span">{{isDisabled(index + 1)?'&times':index+1}}</span>
      <input class="build-cell-start" type="checkbox" checked
              :value="index + 1"
              v-if="type === 'start'"
              v-model="sets">

      <input class="build-cell-end" type="checkbox"
              :value="index + 1"
              v-show="type === 'end' && !isDisabled(index + 1)"
              v-model="endSets">

    </label>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        endSets: []
      }
    },
    ready() {
//      if(this.type == 'end'){
//        this.endSets = []
//      }

    },
    props: {
      total: {
        type: Number,
        default() {
          return 0
        }
      },
      type: {
        type: String,
        default() {
          return 'start'
        }
      },
      sets: {
        type: Array,
        default() {
          return []
        }
      },
      onCheck: {
        type: Function,
        default: () => {
        }
      }

    },
    methods: {
      checkHandle(index) {
        this.onCheck(this.total, this.sets, this.endSets)
      },
      isDisabled(index) {
        return this.sets.indexOf(index) === -1
      }
    }
  }

</script>

<style lang="less">
  .build-map {
    /*width: 600px;*/
    width: 240px;
  }

  .build-cell {
    position: relative;
    display: inline-block;
    height: 30px;
    width: 50px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #415973;
    margin: 5px;
    border-radius: 3px;
    background-color: #fff;

    &.checked {
      background-color: #55ccff;
    }
    &.disabled {
      color: #B5B5B5;
      border-color: #B5B5B5;
      font-family: sans-serif;
    }

    &:hover {
      color: #3e95c7;
      border-color: #3e95c7;
      background-color: #b4ecff;
    }
    &:active {
      background-color: #70daff;
    }

  }

  .build-cell-start {
    display: none;
  }
  .build-cell-end{
    position: absolute;
    bottom: 0;
    right: 0;
    display: block;
    height: 14px;
    width: 14px;
    margin: 0;
  }
</style>